    export default {
        name: "dblc",
        setup(props) {
            const router = VueRouter.useRouter();
            const route = VueRouter.useRoute();
            const configs = inject('globalConfigs');
            const { smartSpeak } = inject('speech'); //语音
            const lastpage = ref();
            const id = ref('');
            const bgsx = ref({});
            const cxjgs = ref({});
            const pageSize = ref(10); // 每页数据量
            const pageCurrent = ref(1); // 当前页
            const total = ref(0); // 数据总量
            const current = ref(0);
            const showPagination = computed(()=>{  
                return total.value > pageSize.value;
            });
            const loading = ref(false);
            const dialogkb = ref(false);
        	const kbcloums = ref({});
        	const kbdata = ref([]);//子表数据详情
            const dialogfwb = ref(false);
            const fwbtxt = ref('');	

            onMounted(async() => {
                if (!route.query.data) {
                    smartSpeak('参数不正确，请返回');
                	ElMessage.error('参数不正确，请返回');
        			setTimeout(() => {
        				router.push({name: 'home'});
        			}, 1500);
                } else {
                    lastpage.value = JSON.parse(decodeURIComponent(route.query.data));
                    id.value = lastpage.value.id;
                	getcxjg();
                }
            });
            
        	// 查询结果
            const getcxjg = _.debounce(async (currentPage = 1) => {
                pageCurrent.value = currentPage;
                const input = { ...lastpage.value };
                delete input.id;
                if (Object.keys(input).length === 0) {
                    smartSpeak('输入为空');
                    return ElMessage.error('输入为空');
                }
                const res = await dblc({id: id.value,input,page: pageCurrent.value,pageSize: pageSize.value});
                if (Number(res.total) < 1) {
                    smartSpeak('没有查找到，请检查输入');
                    ElMessage.error('没有查找到，请检查输入');
                    setTimeout(() => {
        				router.back();
        			}, 500);
        			return;
                }
                bgsx.value = res.mainbgsx;
                if (res.data) {
                    cxjgs.value = res.data.map(table => ({
                      ...table,
                      items: processSubTableData(table.items),
                      fields: table.fields || {}
                    }))
                  }
            }, 300);
            
			// 分页触发
			const change = (e) => {
				getcxjg(e.current);
			};

			const checkImgType = (fileName) => {
				if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileName) && !window.validators.isBase64Image(fileName)) {
					return false;
				} else {
					return true;
				}
			};

			const parsedItem = (item) => {
				if (window.validators.isJSON(item)) {
					let obj = JSON.parse(item);
					return obj;
				}
				return [];
			};
            
            
            //查看子表
            const ckzb = (k, value) => {
                if(!k || !value) return;
                if(value.length > 0){
                    kbcloums.value = {};
                    let xx = bgsx.value.fields[k].zboptions.map(item => { return item.key });
                    for(let v of xx){
                        kbcloums.value[v] = v;
                    }
                    kbdata.value = value;
                    dialogkb.value = true;
                }
            }
            
            //查看富文本
            const ckfwb = (v) => {
                if(!v) return;
                fwbtxt.value = v;
                dialogfwb.value = true;
            }
            
            const toback = () => {
                router.back();
            }
            
            const getColumnWidth = (type) => {
              const typeWidthMap = {
                image: 120,
                multiimage: 200,
                subtable: 150,
                word: 180,
                sczs: 160,
                muselect: 200,
                checkbox: 200
              }
              return typeWidthMap[type] || 'auto'
            }
            
            const isImageCell = (value) => {
              return typeof value === 'string' && 
                (validators.isImageUrl(value) || validators.isBase64Image(value))
            }
            
            const processSubTableData = (data) => {
              return data.map(item => {
                Object.entries(item).forEach(([key, value]) => {
                  if (validators.isJSON(value)) {
                    item[key] = JSON.parse(value)
                  }
                })
                return item
              })
            }
            
            return {
                processSubTableData,
                isImageCell,
                configs,
                lastpage,
                id,
                bgsx,
                cxjgs,
                pageSize,
                pageCurrent,
                total,
                current,
                showPagination,
                getcxjg,
                change,
                checkImgType,
                parsedItem,
                getColumnWidth,
                toback,
                loading,
                ckzb,
                kbdata,
                dialogkb,
                kbcloums,ckfwb,fwbtxt,dialogfwb, getFileName,
            };
        },
        
        template: `
<div v-if="configs.name">
   <!-- 查看富文本弹窗 -->
    <el-dialog v-model="dialogfwb" title="查看内容">
        <div v-html="fwbtxt"></div>
    </el-dialog>
    
    <!-- 查看子表弹窗 -->
    <el-dialog v-model="dialogkb" title="查看子表数据" width="65%">
        <el-table :data="kbdata" max-height="550" border>
            <el-table-column v-for="(col, colKey) in kbcloums" :key="colKey" :prop="colKey" :label="col">
                <template #default="{ row }">
                    <el-image v-if="isImageCell(row[colKey])" :src="row[colKey]" :preview-src-list="[row[colKey]]" style="max-width: 80px; height: 30px;"/>
                    <span v-else>{{ row[colKey] }}</span>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    
	<div class="header row">
		<div class="col-lg-2 col-md-0">&nbsp;</div>
		<div class="col-lg-10 col-md-12">
			<a href="/pc"><img class="icon-logo" src="/pc_static/logo.png" /></a>
		</div>
	</div>

    <div class="c-center" style="margin-top:30px;">
        <div class="cen-form2" style="width:1500px">
            <!-- 主表头 -->
            <div class="ckhead" v-if="bgsx">
                <p>{{ bgsx.formname }}</p>
            </div>

            <!-- 多表联查渲染 -->
            <template v-for="(cxjg, tableKey) in cxjgs" :key="tableKey">
                <div style="margin: 20px;border: 1px solid #ebeef5;border-radius: 4px;">
                    <div style="padding: 12px;font-weight: bold;text-align:center;">
                        {{ cxjg.formname || '关联表' + tableKey + 1 }}
                    </div>
                    
                    <el-table :data="cxjg.items" border :row-key="row => row.id">
                        <!-- 动态列生成 -->
                        <template v-for="(field, fieldKey) in cxjg.fields" :key="fieldKey">
                            <el-table-column :prop="fieldKey" :label="field.name" :width="getColumnWidth(field.type)">
                                <template #default="scope">
                                    <!-- 多图轮播 -->
                                    <el-carousel v-if="field.type === 'multiimage'" indicator-position="outside" height="120px">
                                        <el-carousel-item v-for="(img, imgIdx) in parsedItem(scope.row[fieldKey])" :key="imgIdx">
                                            <el-image :src="img" :preview-src-list="parsedItem(scope.row[fieldKey])"/>
                                        </el-carousel-item>
                                    </el-carousel>

                                    <!-- 子表 -->
                                    <el-button v-else-if="field.type === 'subtable'" type="primary" link @click="ckzb(fieldKey, parsedItem(scope.row[fieldKey]))">查看详情</el-button>

                                    <!-- 文件下载 -->
                                    <div v-else-if="field.type === 'word'" class="file-cell">
                                        <el-link :href="scope.row[fieldKey]" target="_blank">
                                            <el-icon><Document /></el-icon>下载文档
                                        </el-link>
                                    </div>
                                    
                     				<template v-else-if="field.type=== 'file'">
                    				    <div class="print-container" v-if="scope.row[fieldKey]">
                                        	<el-link type="primary" :href="scope.row[fieldKey]" target="_blank" :underline="false">
                                        		{{getFileName(scope.row[fieldKey])}}
                                        	</el-link>
                        				</div>
                    				</template>
                    				
                    				<template v-else-if="field.type=== 'multifile'">
                    					<div class="print-container" v-if="$validators.isJSON(scope.row[fieldKey])">
                    						<div v-for="(src, idx) in JSON.parse(scope.row[fieldKey])" :key="idx">
                        						<el-link type="primary" :href="src" target="_blank" :underline="false">
                                            		{{getFileName(src)}}
                                            	</el-link>
                    						</div>
                    					</div>
                    				</template>
                                    
                                    <!-- 富文本 -->
                    				<template v-else-if="field.type == 'richtext' && scope.row[fieldKey]">
                    					<el-button type="primary" link size="small" @click="ckfwb(scope.row[fieldKey])">查看内容</el-button>
                    				</template>

                                    <!-- 图片类型 -->
                                    <el-image v-else-if="['image', 'sczs'].includes(field.type)"
                                        :src="scope.row[fieldKey]"
                                        :preview-src-list="[scope.row[fieldKey]]"
                                        style="max-width: 80px;"
                                    />

                                    <!-- 多选类型 -->
                                    <span v-else-if="['muselect','checkbox'].includes(field.type)">
                                        {{ parsedItem(scope.row[fieldKey]).join(', ') }}
                                    </span>

                                    <!-- 默认文本 -->
                                    <span v-else>
                                        {{ scope.row[fieldKey] || '-' }}
                                    </span>
                                </template>
                            </el-table-column>
                        </template>
                    </el-table>
                </div>
            </template>

            <!-- 分页 -->
            <div v-if="showPagination" class="pagination-container">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :total="total"
                    v-model:current-page="pageCurrent"
                    v-model:page-size="pageSize"
                    @current-change="getcxjg"
                    @size-change="getcxjg"
                />
            </div>

            <div class="cxdiv">
                <el-button type="primary" @click="toback">返回查询</el-button>
            </div>
        </div>
    </div>
</div>
        `
    }